﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>项目物流</title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s5/s5-bg.jpg');
            background-repeat: no-repeat;
            overflow: hidden;
        }

        .box {
            position: relative;
            font-family: "微软雅黑";
            cursor: pointer;
            overflow: hidden;
        }

        .Center {
            position: absolute;
            width: 110px;
            height: 110px;
            left: 112px;
            top: 112px;
            z-index: 2;
            background: url(images/s5/img/qj.png) no-repeat;
            background-size: 110px 110px;
        }

        @-webkit-keyframes rorate {
            0 {
                transform: rotate(0);
            }

            50% {
                transform: rotate(360deg);
            }

            100% {
                transform: rotate(0);
            }
        }

        .circle {
            width: 70px;
            height: 70px;
            color: #fff;
            position: absolute;
        }

        .select {
            transform: scale(1.5);
        }

        .select110 {
            transform: scale(1.1);
        }
        /*.circle:hover{
            animation: rorate 0.7s ease-out 1;
            transform-origin: center;
            transform: scale(1.6);
        }*/
        .contain .circle:nth-child(2) {
            background: url(images/s5/img/jcjs.png) no-repeat;
            left: 135px;
            top: 15px;
        }

        .contain .circle:nth-child(3) {
            background: url(images/s5/img/jg.png) no-repeat;
            left: 20px;
            top: 80px;
        }

        .contain .circle:nth-child(4) {
            background: url(images/s5/img/dl.png) no-repeat;
            left: 235px;
            top: 80px;
        }

        .contain .circle:nth-child(5) {
            background: url(images/s5/img/jtys.png) no-repeat;
            left: 72%;
            top: 55%;
        }

        .contain .circle:nth-child(6) {
            background: url(images/s5/img/yq.png) no-repeat;
            left: 38px;
            top: 190px;
        }

        .contain .circle:nth-child(7) {
            background: url(images/s5/img/yjkc.png) no-repeat;
            left: 140px;
            top: 245px;
        }

        .contain {
            width: 332px;
            height: 332px;
            cursor: pointer;
            background: url(images/s5/img/ciecle.png) no-repeat;
            animation: move 20s ease-in-out infinite;
        }

        .stop {
            animation-play-state: paused;
        }

        .running {
            animation-play-state: running;
        }

        @-webkit-keyframes move {
            from {
                -webkit-transform: rotate(0);
            }

            to {
                -webkit-transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <canvas id="jzcavans0" style="position:absolute;top:0px; left:0px;" width='1920' height='1080'></canvas>
    <div id="popupLayer" style="position: absolute; top: 0px; left: 0px;  width:1920px; height:1080px;"></div>
    <div id="container" style="position: absolute; top: 0px; left: 0px;  width:1920px; height:1080px;"></div>

    <div style="position:absolute;top:0px; left:0px;" id="legendArea">
    </div>
    <div id="labelTime" style="position: absolute; color:#FFF; left:1555px; width:350px; top: 40px; font-size: 40px; font-family: Arial; ">
        2017-01-01 00:00
    </div>
    <div id="projDetailLayer" style="display:none; position: absolute; top: 279px; left: 40px; width: 1920px; height: 727px; background:url('./images/s5/s5-proj-bg.png') no-repeat;">
        <div style="position: absolute; top: 275px; left: 0px; width:700px; display:none;">
            <span style="position: absolute; left: 30px; top: 50px; width: 40px; text-wrap: normal; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                项目名称
            </span>
            <span style="position: absolute; left: 220px; top: 130px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                项目经理:
            </span>
            <span style="position: absolute; left: 220px; top: 150px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                业务段:
            </span>
            <div style="position: absolute; left: 220px; top: 170px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                货量<span style="font-size:9px">(吨)</span>:
            </div>
            <span style="position: absolute; left: 220px; top: 190px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                出发港口:
            </span>
            <span style="position: absolute; left: 220px; top: 229px; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                目的港口:
            </span>
            <span style="position: absolute; left: 30px; top: 340px; width: 40px; text-wrap: normal; color: #ee730a; font-weight: bold; font-family: 'Microsoft YaHei';">
                项目批次
            </span>
            <span id="projTitle" style="position: absolute; left: 70px; top: 58px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                项目名称种子这里项目名称种子这里项目名称种子这里项目名称种子这里项目名称种子这里项目名称种子这里
            </span>
            <span id="projManager" style="position: absolute; left: 290px; top: 130px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                项目名称
            </span>
            <span id="projBiz" style="position: absolute; left: 285px; top: 158px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                项目名称
            </span>
            <span id="projValue" style="position: absolute; left: 285px; top: 170px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                货量
            </span>
            <span id="projSource" style="position: absolute; left: 225px; top: 190px; color: white; width: 160px; text-indent:4em; text-wrap:normal; height: 68px; overflow: hidden; font-family: 'Microsoft YaHei';">
                出发
            </span>
            <span id="projDest" style="position: absolute; left: 290px; top: 229px; color: white; width: 290px; height: 38px; overflow: hidden; font-family: 'Microsoft YaHei';">
                目的
            </span>
            <span id="projBatch" style="position:absolute; left:70px; top:340px; color:white; width:290px; height:120px; overflow:hidden; font-family:'Microsoft YaHei'; font-size:1em;">
                批次
            </span>
        </div>
    </div>
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script type="text/javascript" src="assets/echarts.min.js"></script>
    <script type="text/javascript" src="assets/dataTool.min.js"></script>
    <script type="text/javascript" src="assets/world.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode/jzcode.event.js"></script>
    <script src="./assets/coolvis/coolvis.host.js"></script>
    <script src="./content/jzcode.sinotrans.js"></script>
    <script src="./content/s5-1-event.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var option = null;
        var g_seriesProj = null;
        app.title = '65k+ 飞机航线';

        var g_project_selected = null;
        var g_selected_links = null;

        var color = ['#a6c84c', '#ffa022', '#46bee9'];
        function itemStyle(idx) {
            return {
                normal: {
                    symbolSize: 10,
                    color: '#fff',
                    borderWidth: 10,
                    borderColor: ['rgba(30,144,255,1)', 'lime'][idx],
                    lineStyle: {
                        type: 'solid'
                    }
                }
            }
        };

        var geoCoordMap = null;
        var geoLinks = null;
        var geoCoordMapHWJGML = null;
      
        var g_cityGeoData = [{
    "type": "中国—中亚—西亚", "value": [{ "name": "吉达", "value": [39.1, 21.28, 0] }
    , { "name": "乌姆卡斯尔", "value": [4.4, 51.21, 0] }
    , { "name": "达曼", "value": [50.11, 26.34, 0] }
    , { "name": "巴士拉", "value": [47.78, 30.5, 0] }
    , { "name": "吉赞", "value": [42.3, 16.54, 0] }
    , { "name": "布什尔", "value": [50.82, 28.92, 0] }
    , { "name": "法奥", "value": [48.46, 29.98, 0] }
    , { "name": "巴库", "value": [49.86, 40.4, 0] }
    , { "name": "吉达", "value": [39.1, 21.28, 0] }
    , { "name": "吉达", "value": [39.1, 21.28, 0] }
    , { "name": "吉达", "value": [39.1, 21.28, 0] }
    , { "name": "占贾", "value": [46.37, 40.68, 0] }
    , { "name": "DUSHANBE", "value": [68.51, 38.38, 0] }
    , { "name": "贝尼萨夫", "value": [-1.37, 35.3, 0] }
    , { "name": "奥兰", "value": [19.91, 60.17, 0] }
    , { "name": "巴尔奇克", "value": [28.16, 43.42, 0] }
    , { "name": "拉塔基亚", "value": [35.79, 35.54, 0] }
    , { "name": "吉达", "value": [39.1, 21.28, 0] }
    , { "name": "吉达", "value": [39.1, 21.28, 0] }
    , { "name": "达曼", "value": [50.11, 26.34, 0] }
    , { "name": "达曼", "value": [50.11, 26.34, 0] }
    , { "name": "达曼", "value": [50.11, 26.34, 0] }
    , { "name": "达曼", "value": [50.11, 26.34, 0] }
    , { "name": "达曼", "value": [50.11, 26.34, 0] }
    , { "name": "罗安达", "value": [13.28, -8.83, 0] }
    , { "name": "安纳巴", "value": [7.75, 36.92, 0] }
    , { "name": "吉杰利", "value": [5.74, 36.81, 0] }
    , { "name": "斯基克达", "value": [6.91, 36.87, 0] }
    , { "name": "达曼", "value": [50.11, 26.34, 0] }
    , { "name": "吉赞", "value": [42.3, 16.54, 0] }
    , { "name": "吉赞", "value": [42.3, 16.54, 0] }
    , { "name": "阿尔及尔", "value": [3.05, 36.75, 0] }
    , { "name": "班德尔马", "value": [27.97, 40.35, 0] }
    , { "name": "特拉维夫", "value": [34.46, 32.05, 0] }
    , { "name": "拉卡尔", "value": [-1.16, 43.19, 0] }
    , { "name": "吉赞", "value": [42.3, 16.54, 0] }
    , { "name": "阿里卡", "value": [-70.2, 18.29, 0] }
    , { "name": "阿巴斯港", "value": [56.26, 27.18, 0] }
    , { "name": "吉赞", "value": [42.3, 16.54, 0] }
    , { "name": "提奈斯", "value": [1.31, 36.5, 0] }
    , { "name": "奥兰", "value": [-0.63, 35.69, 0] }
    , { "name": "吉赞", "value": [42.3, 16.54, 0] }
    , { "name": "ANKARA", "value": [32.85, 39.93, 0] }
    , { "name": "奥兰", "value": [19.91, 60.17, 0] }
    , { "name": "霍梅尼港", "value": [49.07, 30.44, 0] }
    , { "name": "多哈", "value": [51.56, 25.26, 0] }
    , { "name": "代利斯", "value": [3.93, 36.87, 0] }
    , { "name": "阿萨鲁耶", "value": [52.36, 27.3, 0] }
    , { "name": "阿什哈巴德", "value": [58.24, 37.58, 0] }
    , { "name": "ALEXANDER", "value": [-81.2, 35.89, 0] }
    , { "name": "WAHRAN", "value": [-0.39, 35.43, 0] }
    , { "name": "吉赞", "value": [42.3, 16.54, 0] }
    , { "name": "DUSHANBE", "value": [68.51, 38.38, 0] }
    , { "name": "巴士拉", "value": [47.78, 30.5, 0] }
    , { "name": "霍拉姆沙赫尔", "value": [48.1, 30.26, 0] }
    , { "name": "阿巴丹", "value": [48.3, 30.4, 0] }
    , { "name": "伊拉克利翁", "value": [25.09, 35.16, 0] }
    ]
}
, {
    "type": "中国—中南半岛", "value": [{ "name": "胡志明市", "value": [106.62, 10.82, 0] }
    , { "name": "民都岛", "value": [121.07, 13.11, 0] }
    , { "name": "哥打基纳巴卢", "value": [116.07, 5.98, 0] }
    , { "name": "巴生港", "value": [101.24, 3, 0] }
    , { "name": "海防", "value": [106.41, 20.52, 0] }
    , { "name": "海防", "value": [106.41, 20.52, 0] }
    , { "name": "关丹", "value": [103.22, 3.76, 0] }
    , { "name": "古普", "value": [102.28, 25.66, 0] }
    , { "name": "拉布安", "value": [105.83, -6.36, 0] }
    , { "name": "巴生港", "value": [101.24, 3, 0] }
    , { "name": "河内", "value": [105.83, 21.02, 0] }
    , { "name": "岘港", "value": [108.2, 16.05, 0] }
    , { "name": "西贡", "value": [106.62, 10.82, 0] }
    , { "name": "边水", "value": [106.48, 10.62, 0] }
    , { "name": "米里", "value": [113.99, 4.39, 0] }
    , { "name": "雷东港", "value": [-2.08, 47.64, 0] }
    , { "name": "巴西古单", "value": [103.54, 1.26, 0] }
    , { "name": "锦普港", "value": [107.22, 21.12, 0] }
    , { "name": "金边", "value": [104.55, 11.35, 0] }
    ]
}
, {
    "type": "孟中印缅经济走廊", "value": [{ "name": "新德里", "value": [77.2, 28.61, 0] }
    , { "name": "吉大港", "value": [91.48, 22.18, 0] }
    , { "name": "达卡", "value": [90.39, 23.7, 0] }
    , { "name": "林查班", "value": [100.53, 13.5, 0] }
    , { "name": "孟买", "value": [72.87, 19.07, 0] }
    , { "name": "沙迦", "value": [55.75, 25.07, 0] }
    , { "name": "加尔各答", "value": [88.36, 22.57, 0] }
    , { "name": "钦奈", "value": [80.27, 13.08, 0] }
    , { "name": "海德拉巴", "value": [78.48, 17.38, 0] }
    , { "name": "仰光港", "value": [96.15, 16.47, 0] }
    , { "name": "实兑", "value": [92.54, 20.8, 0] }
    , { "name": "班加罗尔", "value": [77.59, 12.97, 0] }
    , { "name": "梭桃邑", "value": [100.55, 12.37, 0] }
    ]
}
, {
    "type": "中蒙俄", "value": [{ "name": "阿拉木图", "value": [76.85, 43.22, 0] }
    , { "name": "亚历山大罗夫斯克", "value": [57.59, 59.15, 0] }
    , { "name": "罗斯托克", "value": [12.09, 54.09, 0] }
    , { "name": "阿尔汉格尔", "value": [40.56, 64.54, 0] }
    , { "name": "阿克托别", "value": [57.99, 48.77, 0] }
    , { "name": "加里宁格勒", "value": [20.45, 54.71, 0] }
    , { "name": "明斯克", "value": [27.56, 53.9, 0] }
    , { "name": "明斯克", "value": [27.56, 53.9, 0] }
    ]
}
, {
    "type": "中巴", "value": [{ "name": "米纳卡布斯", "value": [58.56, 23.62, 0] }
    , { "name": "瓜德尔", "value": [62.32, 25.19, 0] }
    , { "name": "奥尔马拉", "value": [64.6, 25.26, 0] }
    , { "name": "伯斯尼", "value": [63.4, 25.28, 0] }
    , { "name": "拉合尔", "value": [74.35, 31.55, 0] }
    , { "name": "卡拉奇", "value": [67, 24.86, 0] }
    , { "name": "卡西姆港", "value": [42.86, 25.82, 0] }
    , { "name": "卡拉奇", "value": [67, 24.86, 0] }
    , { "name": "卡拉奇", "value": [67, 24.86, 0] }
    , { "name": "卡拉奇", "value": [67, 24.86, 0] }
    , { "name": "卡拉奇", "value": [67, 24.86, 0] }
    ]
}
, {
    "type": "新亚欧大陆桥", "value": [{ "name": "塔什干", "value": [69.24, 41.29, 0] }
    , { "name": "波季", "value": [41.67, 42.15, 0] }
    , { "name": "巴塔米", "value": [41.38, 41.39, 0] }
    , { "name": "奥什", "value": [72.81, 40.51, 0] }
    , { "name": "比什凯克", "value": [74.56, 42.87, 0] }
    ]
}
        ];
        var g_colorArr = ['red','orange','yellow','green','blue','puple'];
        var s5 = {
            createOption: function () {
                var seriresArr = [];
                var legendHtml = "";
                for (var index = 0; index < g_cityGeoData.length; index++) {
                    legendHtml += "<button onclick=\"showSeries(" + index + ")\">" + g_cityGeoData[index].type + "</button>";
                    seriresArr.push({
                        name: g_cityGeoData[index].type,
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        rippleEffect: {
                            brushType: 'stroke',
                            scale: 5.0
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'bottom',
                                formatter: '{b}',
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        symbolSize: [8, 8],
                        itemStyle: {
                            normal: {
                                color: g_colorArr[index]
                            }
                        },
                        data: g_cityGeoData[index].value,
                        z: 3
                    });
                }
                $('#legendArea').html(legendHtml);
                return {
                    title: [{
                        text: '',
                        x: 85,
                        y: 600,
                        textAlign: 'left',
                        textStyle: {
                            color: 'white',
                            fontSize: 24
                        }
                    }],
                    legend: {
                        show: true,
                        align:'right'
                    },
                    animation: false,
                    tooltip: {
                        trigger: 'item'
                    },
                    geo: {
                        map: 'world',
                        left: 100,
                        top: 200,
                        right: 100,
                        bottom: 100,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderColor: '#003',
                                color: 'rgb(105,182,223)',
                                shadowColor: 'rgba(50, 50, 50, 0.2)',
                                shadowBlur: 10
                            }
                        }
                    },
                    series: seriresArr
                }
            }
        };
        $(document).ready(function () {
            if (!coolvis.host.isRunInSystem()) {
                $('body').css('overflow', 'scroll');
                $('#debug').show();
            }
            option = s5.createOption();
            myChart.setOption(option);
        });
        function showSeries(index) {
            var series = option.series[index];
            if (series.data != null) {
                series.data = null;
            } else {
                series.data = g_cityGeoData[index].value;
            }
            myChart.setOption(option);
        }
    </script>
    <!--<script>
        $(document).ready(function () {
            register();
        });
    </script>-->

</body>

</html>